import React,{ Component,Fragment } from 'react';
import Header from '../components/Header'
import 'antd/dist/antd.css';
import { Input, Button } from 'antd';
import HeadImg from '../img/HeaderImg.jpg'
import '../css/Tabs.css';


class PersonInfo extends Component {
    constructor(props) {
        super(props);
        this.state={
            value: '伏天、'
        }
        this.handleInputChange = this.handleInputChange.bind(this)
    }
    render(){
        return(
        <Fragment> 
            <Header/>
            <div className="Person">
                <img src={HeadImg} alt="头像"/>
                <p>更改头像</p>
                 <ul>
                     <li>
                        <span>昵称</span>
                        <Input type="text" value={this.state.value} onChange={this.handleInputChange}/>
                     </li>
                     <li>
                        <span>电子邮件</span>
                        <p>点击绑定</p>
                     </li>
                     <li>
                        <span>手机</span>
                        <p>绑定手机</p>
                     </li>
                     <li>
                        <span>QQ</span>
                        <p>绑定QQ</p>
                     </li>
                     <Button>确定</Button>
                 </ul>
                
            </div>
        </Fragment>
        )
    }
    handleInputChange(e){
        const value = e.target.value;
        this.setState({
            value:value
        })
    }
}
export default PersonInfo;